<template>
  <div style="padding: 1rem">
    <!-- 上方菜单 -->
    <div class="main">
      <!-- 查询表单 -->
      <div>
        <ElForm :inline="true">
          <ElFormItem>
            <ElInput v-model="queryInfo.title" placeholder="标题模糊查询"></ElInput>
          </ElFormItem>
          <ElFormItem>
            <ElInput v-model="queryInfo.content" placeholder="内容模糊查询"></ElInput>
          </ElFormItem>
          <ElFormItem>
            <ElInput v-model="queryInfo.username" placeholder="发布人模糊查询"></ElInput>
          </ElFormItem>

          <ElFormItem>
            <ElButtonGroup>
              <ElButton type="danger" @click="reset">重置</ElButton>
              <ElButton type="primary" @click="requey">查询</ElButton>
            </ElButtonGroup>
          </ElFormItem>
          <ElFormItem>
            <ElButton type="warning" @click="avisible = true">添加</ElButton>
          </ElFormItem>
        </ElForm>
      </div>
    </div>

    <!-- 数据呈现部分 -->
    <div>
      <ElTable :data="list" v-loading="loading">
        <ElTableColumn label="编号" prop="bid"></ElTableColumn>
        <ElTableColumn label="标题" prop="title"></ElTableColumn>
        <ElTableColumn label="发布人" prop="username"></ElTableColumn>
        <ElTableColumn label="是否置顶" prop="topIndex"></ElTableColumn>
        <ElTableColumn label="公告发布时间">
          <template #default="scope">
            {{ Tools.formatDate(scope.row.lastupdate) }}
          </template>
        </ElTableColumn>
        <ElTableColumn label="操作">
          <template #default="scope">
            <ElButton size="small" @click="del(scope.row)" type="danger">删除</ElButton>
            <ElButton size="small" @click="showDetail(scope.row)" type="info">查看内容</ElButton>
            <ElButton size="small" @click="showModify(scope.row)" type="success">修改</ElButton>
          </template>
        </ElTableColumn>
      </ElTable>
      <PageComp :page="page" @page-change="query"></PageComp>
    </div>
  </div>

  <!-- 修改对话框 -->
  <ElDialog v-model="mvisible" title="修改信息" @close="requey">
    <div>
      <ElForm v-loading="loading">
        <ElFormItem>
          <ElInput v-model="modifyInfo.title" placeholder="标题"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="modifyInfo.username" placeholder="发布人"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInputNumber :min="1" v-model="modifyInfo.topIndex" placeholder="是否置顶"></ElInputNumber>
        </ElFormItem>
        <ElFormItem>
          <ElInput type="textarea" rows="7" v-model="modifyInfo.content" placeholder="内容"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElButton @click="modify" type="primary">保存</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
  </ElDialog>

  <!-- 添加对话框 -->
  <ElDialog v-model="avisible" title="添加信息" @open="resetAdd" @close="requey">
    <div>
      <ElForm v-loading="loading">
        <ElFormItem>
          <ElInput v-model="addInfo.title" placeholder="标题"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput v-model="addInfo.username" placeholder="发布人"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElInput type="textarea" rows="7" v-model="addInfo.content" placeholder="内容"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <ElButton @click="resetAdd" type="danger">重置</ElButton>
          <ElButton @click="add" type="primary">添加</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
  </ElDialog>

  <!-- 内容查看对话框 -->
  <ElDialog v-model="dvisible" :title="detailInfo.title">
    <div>
      <pre class="pre_info">{{ detailInfo.content }}</pre>
    </div>
  </ElDialog>
</template>
<script setup lang="ts">
//#region  基础导入和变量
// vue核心
import { ref } from 'vue'
// 饿了么组件
import { ElInputNumber, ElMessage, ElMessageBox, ElButtonGroup, ElDialog, ElButton, ElForm, ElFormItem, ElInput, ElTable, ElTableColumn } from 'element-plus'

import { BaseDataResult, BasePageVO, BaseResult, PageBean } from '../../ts/types/BaseResult'
import { TbBillboard } from '../../ts/types/CRUD'
import { ApiService } from '../../ts/ApiService'
import Tools from '../../ts/Tools'
import PageComp from '../../components/PageComp.vue'

const loading = ref(false)
//#endregion

//#region 删除

const del = (info: TbBillboard) => {
  ElMessageBox.confirm(`是否删除：${info.title}`).then(() => {
    loading.value = true
    ApiService.delete(`/crud/billboard/${info.bid}`, {}, (data: BaseResult) => {
      loading.value = false
      data.success ? ElMessage.success(data.message) : ElMessage.error(data.message)
      requey()
    })
  })
}

//#endregion

//#region 修改
const modifyInfo = ref({} as TbBillboard)
const mvisible = ref(false)

const showModify = (info: TbBillboard) => {
  loading.value = true
  ApiService.get(`/crud/billboard/${info.bid}`, {}, (data: BaseDataResult<TbBillboard>) => {
    loading.value = false
    if (data.success) {
      modifyInfo.value = data.data
      mvisible.value = true
    } else {
      ElMessage.error(data.message)
    }
  })
}

const modify = () => {
  loading.value = true
  ApiService.put('/crud/billboard', modifyInfo.value, (data: BaseResult) => {
    loading.value = false
    data.success ? ElMessage.success(data.message) : ElMessage.error(data.message)
  })
}

//#endregion

//#region 添加
const addInfo = ref({} as TbBillboard)
const avisible = ref(false)

const resetAdd = () => {
  addInfo.value = {} as TbBillboard
}

const add = () => {
  loading.value = true
  ApiService.post('/crud/billboard', addInfo.value, (data: BaseResult) => {
    loading.value = false
    data.success ? ElMessage.success(data.message) : ElMessage.error(data.message)
  })
}

//#endregion

//#region 查询
const page = ref({ pageSize: 10, pageNumber: 1 } as PageBean)

const queryInfo = ref({
  title: '',
  content: '',
  username: '',
})

const list = ref([] as Array<TbBillboard>)

const reset = () => {
  queryInfo.value = {
    title: '',
    content: '',
    username: '',
  }
  requey()
}

const requey = () => {
  page.value.pageNumber = 1
  query()
}

const query = () => {
  loading.value = true
  ApiService.get('/crud/billboard', Tools.concatJson(queryInfo.value, page.value), (data: BaseDataResult<BasePageVO<Array<TbBillboard>>>) => {
    loading.value = false
    if (data.success) {
      page.value = data.data.pageBean
      list.value = data.data.data
    } else {
      ElMessage.error(data.message)
    }
  })
}

const detailInfo = ref({} as TbBillboard)
const dvisible = ref(false)

const showDetail = (info: TbBillboard) => {
  loading.value = true
  ApiService.get(`/crud/billboard/${info.bid}`, {}, (data: BaseDataResult<TbBillboard>) => {
    loading.value = false
    if (data.success) {
      detailInfo.value = data.data
      dvisible.value = true
    } else {
      ElMessage.error(data.message)
    }
  })
}

query()
//#endregion
</script>
<style scoped lang="scss">
.main {
  display: flex;
  justify-content: flex-end;
}
.pre_info {
  font-size: 13px;
  white-space: pre-wrap; //文本换行
  word-wrap: break-word; //英文换行
}
</style>
